<template>
    <div class="login-body">
        <div class="left-box">
            <img src="../assets/manage_bg.svg" class="background"/>
        </div>
        <div class="login-box demo-input-suffix">
            <el-form :model="form" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <h3 class="login-title" style="color: #f90">AIRLINE-后台管理登录</h3>
                    </el-col>
                </el-row>
                <el-form-item prop="username">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-input
                                type="text"
                                v-model="form.username"
                                placeholder="请输入账号"
                                clearable
                            />
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="password">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-input
                                class="login-input"
                                placeholder="请输入密码"
                                v-model="form.password"
                                show-password
                                clearable
                            />
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-button class="button-login" type="primary" @click="submitLogin">登录</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
export default {
  data(){
    return{
      form:{
        username:"",
        password:""
      },
      rules:{
        username:[
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    submitLogin(){
      if(this.form.username == ""){
        this.showMessage('账号不能为空','error');
      }else if(this.form.password == ""){
        this.showMessage('密码不能为空','error');
      }else{
        //console.log(this.form);
        this.$http.post("/api/admin/login",this.form).then((res)=>{
          console.log(res.data);
          if(res.data.status == 200){
            this.showMessage("登录成功","success");
            PUZZLE_CONFIG.pageHome = "";
            this.$cookies.set("admin",res.data.admin,'1d');
            this.$store.commit("SET_USER",res.data.admin);
            this.$router.replace({ path: "home" });
          }else{
            this.showMessage(res.data.msg,"error");
          }
        })
        
      }
    }
  }
};
</script>

<style scope>
    .login-body {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: 600px;
        min-height: 350px;
        height: 350px;
        padding: 0;
        transform: translate(-50%, -50%);
        background-color: rgb(253, 251, 246);
        overflow: hidden;
    }

    .left-box {
        float: left;
        padding: 0 5%;
        width: 40%;
        height: 100%;
        background-color: #ffce84;
    }

    .background {
        width: 100%;
        height: 100%;
    }

    .login-box {
        float: left;
        width: 60%;
        padding: 5% 10% 10% 10%;
    }

    .login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #303133;
    }

    .button-login {
        width: 100%;
        margin-top: 10%;
        border-color: #f90 !important;
        background-color: #f90 !important;
    }

    .login-body el-row{
      width:100%;
    }
</style>

